<!-- 选择钱包 -->
<template>
  <div class="purseAddress" :style="{'min-height':minHeight+'px'}" :class="{noScroll:walletList.length<=3}">
    <x-header :left-options="{backText: ''}">钱包地址管理</x-header>
    <img src="../../assets/addSelect.png" alt="" class="addSelectImg" width="20" height="20" @click="$router.push({path:'/main/addWallet'})">
    <div class="purseAddressBox">
      <div class="purseAddressCon" v-for="wallet in walletList">
        <div class="purseAddressTop">
          <img src="../../assets/removeIcon.png" alt="" width="15" @click="removeWallet(wallet.id)">
          <span style="font-size: 13px;position: absolute;right: 35px;" :class="{defaultColor:wallet.defult}">{{wallet.defult?'默认地址':'设为默认地址'}}</span>
          <img src="../../assets/radio.png" alt="" style="position: absolute;right: 10px;" width="20" v-if="wallet.defult">
          <span style="width: 18px;height: 18px;border-radius: 50%;border:1px solid #999;display: block;position: absolute;right:10px;top: 6px"
            v-if="!wallet.defult" @click="isDefault(wallet)"></span>
        </div>
        <div class="purseAddressMain">
          <div>
            <img src="../../assets/walletIconImg.png" alt="" width="30" height="30" style="vertical-align: middle;">
            <span style="vertical-align: middle;">{{wallet.type}}</span>
          </div>
          <div style="color:#999;margin-top:10px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap; width: 92%;">
            {{wallet.address}}
          </div>
        </div>
      </div>
    </div>
    <div style="height: 20px;background: #f6f6f6" v-if="walletList.length>3"></div>
    <confirm v-model="show" title="" @on-cancel="onCancel" @on-confirm="onConfirm">
      <p style="text-align:center;">是否将该地址设置成默认支付地址?</p>
    </confirm>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import { Confirm, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
  import tips from '../../service/tips.js'
  import http from '../../service/http.js'
  export default {
    data() {
      return {
        walletList: [],
        type: "",
        status: 0,
        show: false,
        wallet: {},
        minHeight: ""
      }
    },
    components: {
      XHeader,
      Confirm,
      Group,
      XSwitch,
    },
    mounted() {
      this.minHeight = document.documentElement.clientHeight || document.body.clientHeight;
      this.type = this.$route.query.type;
      this.status = this.$route.query.status;
      this.getWalletAddress()
    },
    methods: {
      // 设置成默认
      isDefault(wallet) {
        this.wallet = wallet;
        this.show = true;
      },
      onCancel() {
        this.show = false;
      },
      onConfirm() {
        http.post("/user/address", {
          id: this.wallet.id
        }).then((res) => {
          if (res.data.status == 200) {
            this.getWalletAddress();
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      },
      goTransferOut(wallet) {
        if (this.type && this.status == 1) {
          this.$router.push({ path: "/main/turnIn?id=" + wallet.id + "&type=" + this.type + "&name=" + wallet.type });
          return false;
        }
        if (this.type) {
          this.$router.push({ path: "/main/transferOut?id=" + wallet.id + "&type=" + this.type + "&name=" + wallet.type });
          return false;
        }
      },
      // 获取钱包地址
      getWalletAddress() {
        http.get("/user/address").then((res) => {
          if (res.status == 200) {
            this.walletList = res.data.body;
          }
        })

      },
      // 删除
      removeWallet(id) {
        http.delete("/user/address?id=" + id).then((res) => {
          if (res.status == 200) {
            tips.tips("删除成功");
            this.getWalletAddress();
          }
        }).catch((res) => {
          tips.tips(res.msg);
        })
      }
    }
  }
</script>
<style lang="less">
  .defaultColor {
    color: #fea620 !important;
  }

  /* body {
    background: #f6f6f6;
  } */
  .noScroll{
    overflow-y: hidden !important;
  }
  .purseAddress {
    background: #f6f6f6;
  }

  .purseAddress .vux-header {
    background: #fff;
  }

  .purseAddress .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .purseAddress .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .purseAddress {
    position: relative;
  }

  .purseAddress .addSelectImg {
    position: absolute;
    top: 11px;
    right: 15px;
  }

  .purseAddressBox {
    padding: 0px 15px;
    margin-top: 15px;
  }

  .purseAddressBox .purseAddressCon {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    .purseAddressTop {
      position: relative;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #f6f6f6;
      img {
        position: absolute;
        right: 125px;
        top: 7px;
      }
    }
    .purseAddressMain {
      padding-left: 15px;
      height: 90px;
      padding-top: 10px;
      margin-bottom: 20px;
    }
  }
</style>